<template lang="pug">
div
  ul.layout-main
    li.home(:class="{'active': active === 'home'}",@click="handler('home')") 首页
    li.sorts(:class="{'active': active === 'sorts'}",@click="$router.push({name: 'sorts:index', params: {id: 0}})") 商品
    li.quick(@click="$router.push({name: 'quick:add'})") 拍照下单
    li.user(:class="{'active': active === 'user'}",@click="handler('user')") 我的
    li.cart(:class="{'active': active === 'cart'}",@click="handler('cart')") 购物车
</template>

<script>
export default {
  props: {
    active: {
      type: String,
      default: 'home'
    }
  },
  methods: {
    handler (type) {
      this.$emit('handler', type)
    }
  }
}
</script>
<style lang="stylus" scoped>
ul
  height: 0.56rem
  position: fixed
  z-index: 3
  background-color: #fff
  border-top: .0225rem solid #ccc
  top: auto
  bottom: 0
  padding-bottom: 0.1rem
  box-sizing: border-box
  li
    list-style: none
    background-repeat: no-repeat
    background-position: center .625rem
    background-size: 1.875rem 1.875rem
    text-align: center
    float: left
    font-size: 0.2rem
    width: 15%
    margin: 0 3%
    height: 100%
    color: #595959
    cursor: pointer
    &:nth-child(1),&:nth-child(2)
      float: left
    &:nth-child(4),&:nth-child(5)
      float: right
    &:before
      content: ''
      width: .675rem
      height: .57rem
      display: block
      margin: 0.14rem auto .08rem
    &.active
      color: #b50909
    &.home:before
      background-position: 0 0
    &.home.active:before
      background-position: 0 -1rem
    &.sorts:before
      background-position: -1rem 0
    &.sorts.active:before
      background-position: -1rem -1rem
    &.cart:before
      background-position: -2rem 0
    &.cart.active:before
      background-position: -2rem -1rem
    &.user:before
      background-position: -2.96rem 0
    &.user.active:before
      background-position: -3.03rem -1rem
  li.quick
    background: #fff
    position: absolute
    border-top: .0225rem solid #ccc
    width: 1.6rem
    height: 1.6rem
    border-radius: 50%
    margin-left: -0.8rem
    margin-top: -0.4rem
    left: 50%
    font-size: 0.32rem
    &:before
      width: .9rem
      height: .9rem
      background-size: 9rem auto !important
      background-position: -7.92rem -7.92rem
      background-color: #b50909
      border-radius: 50%
</style>
